<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box1" style="height: 64px" shadow="never">
          <el-form :inline="true" :model="pageParams" class="demo-form-inline">
        <el-form-item label="工单编号:">
          <el-input
            v-model="pageParams.name"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
          </el-card>
      </el-col>
       <el-col :span="24">
        <el-card class="box2" style="height: 872px" shadow="never">
      <div class="button">
      <el-button type="primary" @click="isshow = true" icon="el-icon-circle-plus-outline" style="background-color:#ff772f;border:none ">新建</el-button>
      </div>
      <el-table
      :data="tableData"
      style="width: 100%"
      >
      <el-table-column
        type="index"
        label="序号"
        width="80"

        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="区域名称"
        >
      </el-table-column>
      <el-table-column
        prop="nodeCount"
        label="点位数"
      >
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注说明"
        >
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template v-slot="{row}">
       <el-button type="text" @click="dialogFormxx(row)" >查看详情</el-button>
       <el-button type="text" @click="addlist(row)">修改</el-button>
       <el-button @click="dellists(row.id)" class="el-button-danger" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
   <div class="box2box">
    <div><span>共{{totalCount}}条记录 第{{pageIndex}}/{{totalPage}}页</span></div>
     <div class="buttonan">
      <el-button type="info" @click="previousPage">上一页</el-button>
      <el-button type="info" @click="nextPage">下一页</el-button>
      </div>
   </div>
        </el-card>
       </el-col>
    </el-row>
    <!-- 新增 -->
    <el-dialog title="新增区域" :visible.sync="isshow" width="630px">
  <el-form ref="addform" :model="form" :rules="rules" label-width="120px" @close="closeFn">
    <el-form-item label="活动名称:" prop="regionName" >
      <el-input
      v-model="form.regionName"
      autocomplete="off"
      placeholder="请输入"
      style="width:396px"
      >

     </el-input>
    </el-form-item>
    <el-form-item label="备注说明：" prop="remark">
      <el-input
      style="width:396px"
        type="textarea"
        :rows="3"
        placeholder="请输入备注(不超过40字)"
        v-model="form.remark">
</el-input>
    </el-form-item>
     <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button  @click="isshow = false"  class="el-buttonxx">取 消</el-button>
              <el-button class="el-buttonx" @click="submit">确 认</el-button>
            </el-col>
          </el-row>
        </el-form-item>
  </el-form>
</el-dialog>
<!-- 区域详情 -->
 <el-dialog title="区域详情" :visible.sync="dialogForm" custom-class="el-dialog" width="630px">
          <el-form :model="form" label-width="150px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="区域名称：">
                <div></div>
              </el-form-item>
              </el-col>
               <el-col :span="24">
                <el-form-item label="包含点位：">
                <div>
                  <el-table
              :data="tableDatas"
              style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                width="80">
              </el-table-column>
              <el-table-column
                prop="name"
                label="点位名称"
                width="158"
                >
              </el-table-column>
              <el-table-column
                prop="vmCount"
                label="设备数量"
                width="158"
                >
              </el-table-column>
    </el-table>
                </div>
              </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-dialog>
        <!-- 修改 -->
         <el-dialog title="修改区域" :visible.sync="dialogFormxxx" width="630px">
  <el-form ref="addform" :model="formx" :rules="rules" label-width="120px" @close="closeFn">
    <el-form-item label="活动名称:" prop="regionName" >
      <el-input
      v-model="formx.regionName"
      autocomplete="off"
      placeholder="请输入"
      style="width:396px"
      >

     </el-input>
    </el-form-item>
    <el-form-item label="备注说明：" prop="remark">
      <el-input
      style="width:396px"
        type="textarea"
        :rows="3"
        placeholder="请输入备注(不超过40字)"
        v-model="formx.remark">
</el-input>
    </el-form-item>
     <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button  @click="dialogFormxxx = false"  class="el-buttonxx">取 消</el-button>
              <el-button @click="ccc" class="el-buttonx">确 认</el-button>
            </el-col>
          </el-row>
        </el-form-item>
  </el-form>
</el-dialog>

  </div>
</template>
<script>
import { getRegon, addRegon, viewRegon, modifyList, delListxx } from '@/api/manage'
export default {
  data () {
    return {
      tableDatas: [],
      formx: {
        regionName: '',
        remark: '',
        id: ''

      },
      form: {
        regionName: '', // 新增部门
        remark: ''
      },
      rules: {
        regionName: [
          { required: true, message: '不能为空哦', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '不能为空哦', trigger: 'blur' }
        ]
      },
      dialogFormxxx: false, // 新增修改的弹窗
      dialogForm: false, // 显示区域详情的弹窗
      isshow: false, // 显示新增弹窗
      totalCount: '', // 一共多少条数据
      totalPage: '', // 多少页
      pageIndex: '', // 第几页
      tableData: [],
      formInline: {

      },
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        mame: '',
        regionId: ''
      },
      params: {

      }
    }
  },
  created () {
    this.getRegon()
  },
  methods: {
    async dellists (id) {
      await delListxx(id)
      this.$message.success('删除成功')
      this.getRegon()
    },
    async ccc () {
      await modifyList({ ...this.formx })
      this.$message.success('编辑成功')
      this.$refs.addform.resetFields()
      this.dialogFormxxx = false
      this.getRegon()
    },
    addlist (row) {
      this.dialogFormxxx = true
      this.formx.regionName = row.name
      this.formx.remark = row.remark
      this.formx.id = row.id
      // console.log(row)
    },
    async dialogFormxx (row) { // 查看详情
      this.dialogForm = true
      this.pageParams.regionId = row.id
      const res = await viewRegon({ ...this.pageParams })
      this.tableDatas = res.data.currentPageRecords
    },
    submit () { // 点击确认
      this.$refs.addform.validate(async pass => {
        if (pass) {
          await addRegon({ ...this.form })
          this.$message.success('恭喜你添加成功')
          this.closeFn()
        }
      })
    },
    onSubmit () {
      this.getRegon()
    },
    async getRegon () {
      const res = await getRegon({ ...this.pageParams })
      // console.log(res)
      this.tableData = res.data.currentPageRecords
      this.totalCount = res.data.totalCount
      this.totalPage = res.data.totalPage
      this.pageIndex = res.data.pageIndex
    },
    previousPage () {
      if (this.pageParams.pageIndex === 1) {
        return this.$message.warning('已经是第一页了')
      }
      this.pageParams.pageIndex--
      this.getRegon()
    },
    nextPage () {
      if ((this.totalCount / 10) < this.pageParams.pageIndex) {
        return this.$message.warning('已经是最后一页了')
      }
      this.pageParams.pageIndex++
      this.getRegon()
    },
    closeFn () {
      this.$refs.addform.resetFields()
      this.isshow = false
    }

  }

}
</script>

<style lang="less" scoped>
.box1 {
  margin-bottom: 20px;
}
form {
  margin-top: -7px;
}
.el-button-danger {
  color: #FF5A5A;
}
.box2box {
  display: flex;
  justify-content: space-between;
  align-content: center;
  line-height: 96px;
  width: 100%;
  height: 96px;
  span {
        font-size: 16px!important;
    color: #dbdfe5!important;
  }
}
.el-buttonxx {
  background-color: #FBF4F0;
}
.el-buttonx {
  background-color: #FF8739;
}

</style>
